<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/11
  Time: 10:19
  To change this template use File | Settings | File Templates.
  卡中类型
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div  id="app">

<div class="card_list">
    <div class="card_posi_title"><div></div><div>请选择卡的种类</div>
        <div><img src="img/hy23.png" class="contact_pop_up"></div></div>
    <div class="list1">
        <ul class="recycling1">

            <c:forEach items="${commodtiyList}" var="commodity">
                <li onclick="getFaceValue('${commodity.id}','${commodity.name}','${commodity.remark}','${commodity.hasCardNumber}','${commodity.cardNumberSize}','${commodity.cardPasswordSize}');"><a>
                    <img src="${commodity.imgPath}">
                    <div class="recyling_card1"><span id="hexiaodanbendan">${commodity.name}</span></div>
                    <div class="recyling_discount1">${commodity.discount}折</div>
                </a>
                </li>
            </c:forEach>
            <input type="hidden" id ='hasCardNumber' value="0" />
            <input type="hidden" id ='cardNumberSize' value="99" />
            <input type ='hidden' id ='cardPasswordSize' value="99" />
            <script>
                function getFaceValue(id,title,remark,hasCardNumber,cardNumberSize,cardPasswordSize) {

                    $("#mianzhi").text();

                    $("#feedbackId").val();

                    if(hasCardNumber!=0){       //没有卡号
                        $('#hasCardNumber').val(1);
                        $('.account').hide();
                        $('#cards').prop('placeholder','卡密之间用逗号隔开');

                    }else{
                        $('#hasCardNumber').val(0);
                        $('.account').show();
                        $('#cards').prop('placeholder','卡号与卡密之间用逗号隔开,每张卡为一行\n例如 123456,78978963');

                    }
                    $('#cardNumberSize').val(cardNumberSize);
                    $('#cardPasswordSize').val(cardPasswordSize);
                    if(cardNumberSize!=99){
                        $('#cardNumber').attr('placeholder','卡号不超过'+cardNumberSize+'位');
                    }
                    if(cardPasswordSize!=99){
                        $('#cardPassword').attr('placeholder','密码不超过'+cardPasswordSize+'位');
                    }

                    $("#cardNumber").attr({maxlength:cardNumberSize});
                    $('#cardPassword').attr({maxlength:cardPasswordSize});

                    //alert(title);
                    $("#kazhong").text(title);
                    $("#tijiaokazhong").text(title);

                    $('.card_list').slideUp();
                    $('.card_posi1').fadeOut();

                    $("#commodityId").val(id);

                    $("#remark").html(remark);

                    $.ajax({
                        url:'/mobile/getFaceVlaue',
                        type:'POST', //GET
                        async:true,    //或false,是否异步
                        data:{
                            commodityId:id
                        },
                        timeout:5000,    //超时时间
                        dataType:'html',    //返回的数据格式：json/xml/html/script/jsonp/text
                        beforeSend:function(xhr){
                            /*console.log(xhr)
                             console.log('发送前')*/
                        },
                        success:function(reData){
                            $('#card_posi2').empty();
                            $("#card_posi2").append(reData);

                        },
                        error:function(xhr,textStatus){
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        },
                        complete:function(){
                            //console.log('结束')
                        }
                    });

                }


            </script>
        </ul>
    </div>
</div>
</div>

<script>
            $('#two').click(function(){
                console.log(1)
                $('.card_list').slideDown()
                $('.card_posi1').fadeIn()
            })


            //关闭蒙层
            $('.card_posi1').click(function(e){

                //弹框显示的内容
                var _con = $(this).find('.card_list')
                var _dis = $('.contact_pop_up1')
                if(!_con.is(e.target) && _con.has(e.target).length === 0){
                    $('.card_list').slideUp()
                    $('.card_posi1').fadeOut()
                }
            })
            $('.contact_pop_up').click(function(){
                $('.card_list').slideUp()
                $('.card_posi1').fadeOut()
            })
</script>
